<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="a.header.jsp" %>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head> 
 <body>
<div style="margin-bottom: 5px;">          
 
<!-- 示例-970 -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
 
</div>
 
<div class="layui-btn-group demoTable">
  <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
  <button class="layui-btn" data-type="isAll">验证是否全选</button> 
  <button class="layui-btn" data-type="re">刷新</button>   
</div>
 <table class="layui-hide" id="idTest" lay-filter="demo"></table>
 
 <script type="text/html" id="status">
              {{#  if(d.id == 1){ }}
                 ok
              {{#  } else { }}
               no
              {{#  } }}
        </script>       
          
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
  var table = layui.table;
  //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    console.log(obj)
  });  
  var t =table.render({
	    elem: '#idTest'
	    ,url:'TableServlet'
// 	    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
		,toolbar:false
	    ,defaultToolbar: []
	    ,title: '用户数据表'
	    ,cols: [[
	      {type: 'checkbox', fixed: 'left'}
	      ,{field:'id', title:'ID', width:80, fixed: 'left',templet:'#status'}
	      ,{field:'username', title:'用户名', width:120, edit: 'text'}
	      ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
	        return '<em>'+ res.email +'</em>'
	      }}
	      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
	      ,{field:'city', title:'城市', width:100}
	      ,{field:'sign', title:'签名',width:80}
	      ,{field:'experience', title:'积分', width:80, sort: true}
	      ,{field:'logins', title:'登入次数', width:100, sort: true}
	    ]]
	    ,page: true
	  });
  var $ = layui.$, active = {
    getCheckData: function(){ //获取选中数据
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      console.log(data);      
      
      var cdata=JSON.stringify(data);
      console.log(cdata);
      var obj=eval("("+cdata+")");
      console.log(obj);
      
      layer.alert(JSON.stringify(data));
      
    }
    ,getCheckLength: function(){ //获取选中数目
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.msg('选中了：'+ data.length + ' 个');
    }
    ,isAll: function(){ //验证是否全选
      var checkStatus = table.checkStatus('idTest');
      layer.msg(checkStatus.isAll ? '全选': '未全选')
    }
    ,re:function(){
    	t.reload();
    }
  };
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
</script>
</body>

</html>